<template>
  <div class="home">
    <div class="search-box">
      <div class="search-item">
        <el-input v-model="address" placeholder="请输入地址" />
        <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
      </div>
    </div>
    <el-table :data="stationList.arr" border style="width: 100%">
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="province" label="省" />
      <el-table-column prop="city" label="市" />
      <el-table-column prop="area" label="区" />
      <el-table-column prop="address" label="详细地址" />
      <el-table-column prop="location" label="坐标" />
      <el-table-column :formatter="gridDateFormatter" prop="created" label="创建时间" />
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleCollect(scope, 1)" v-if="!scope.row.type">收藏</el-button>
          <el-button link type="danger" size="small" @click="handleCollect(scope, 0)" v-else>取消收藏</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="gap"></div>

    <div class="search-box">
      <div class="search-item">
        <el-input v-model="address1" placeholder="请输入地址" />
        <el-date-picker
          v-model="date"
          type="daterange"
          value-format="YYYY-MM-DD"
          range-separator="至"
          start-placeholder=""
          end-placeholder=""
        />
        <el-button type="primary" size="small" @click="handleSearch1">搜索</el-button>
      </div>
    </div>
    <el-table :data="stationInfos.arr" border style="width: 100%">
      <el-table-column prop="parentAddr" label="地址" />
      <el-table-column prop="kcTotal" label="枪总数" />
      <el-table-column prop="sale" label="比例" />
      <el-table-column :formatter="gridDateFormatter" prop="created" label="创建时间" />
    </el-table>
  </div>
</template>

<script setup lang="ts">
  import { fetchStationList, fetchStationInfos, addStation } from "../api/demo"; 
  import { onMounted, reactive, ref } from "vue";
  import moment from "moment";
  import { ElMessage } from 'element-plus'

  const stationList = reactive({
    arr: []
  });

  const stationInfos = reactive({
    arr: []
  });

  const address = ref("祥奉建材综合市场");
  const address1 = ref("祥奉建材综合市场")
  const date = ref([moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")]);

  const getStationList = () => {
    fetchStationList(address.value ? {
      address: address.value
    } : {}).then( (res: any) => {
      console.log(res)
      if (res.code === 0) {
        stationList.arr = res.data
      }
    })
  }

  const getStationInfos = () => {
    fetchStationInfos({
      address: address1.value,
      startTime: date.value ? date.value[0] : '',
      endTime: date.value ? date.value[1] : '',
    }).then( (res: any) => {
      console.log(res)
      if (res.code === 0) {
        stationInfos.arr = res.data
      }
    })
  }

  const gridDateFormatter = (row, column, cellValue,index) => {
      const daterc = row[column.property];
      return moment(daterc).format('YYYY-MM-DD HH:mm:ss');
  }

  const handleCollect = (e: any, type: number) => {
    addStation({ 
      ...e.row,
      type,
     }).then( (res: any) => {
      if (res.code === 0) {
        ElMessage({
          type: "success",
          showClose: true,
          message: type === 1 ? '收藏成功' : '已取消',
        })
        getStationList();
      }
    })
  }

  const handleSearch = () => {
    getStationList();
  }

  const handleSearch1 = () => {
    getStationInfos()
  }
  
  onMounted(() => {
    getStationList();
    getStationInfos()
  })
  
</script>
<style lang="less">

  .search-box {
    .search-item {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .el-input {
        width: 200px;
      }
      .el-button {
        margin-left: 20px;
      }

      .el-date-editor {
        width: 280px;
        margin-left: 20px;
        &.el-input__wrapper {
          flex-grow: 0;
        }
      }
    }
  }

  .gap {
    height: 30px;
  }
</style>
